<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.js"></script>

    <style>
        .select{
            background-color: #f00;
            color: #fff;
        }

        .block{
            list-style: none;
            padding: 0;
            margin: 0;
            float: left;
        }

        .students{
            position: relative;
        }

        .candidates{
            width: 100%;
            border: solid 1px #000000;
            overflow: hidden;
        }

        .candidates ul{
            width: 100%;height: 100%;
            list-style: none;
        }

        .item{
            width: 100px;
            height: 35px;
            border: solid 1px #000000;
            float: left;
            margin: 2px;
            text-align: center;
            line-height: 35px;
        }

        .winner-list{

        }

        .startbtn{
            width: 200px;
            height: 50px;
            margin: 20px auto;
            display: block;
            font-size: 24px;
        }

        .closebtn{
            display: block;
            width: 20px;
            height: 20px;
            border: solid 1px #000000;
            border-radius: 30px;
            transform: scale(0.5);
        }
    
    
    </style>
</head>
<body>
    

    <div  id="root"></div>

    <script  type="text/babel">

        class Candidate extends React.Component{
            constructor(props){
                super(props)

            }

            click(){
                var cb = this.props.callBack(this.props.index);
            }

            render(){
                return(<div  className={this.props.class}>
                
                    {this.props.name}

                    <span  onClick={this.click.bind(this)}> X</span>
                
                </div>)
            }
        }

        class App extends React.Component{

            constructor(props) {
                super(props)

                this.state = {
                    students:["张志阳", "李梦雪", "申柯", 
                    "王晓冬", "张金龙", "尹彪彪", "范俊丹", "姜晓航",
                     "向博", "李杰", "赵勃斌", "朱曾光", "檀清华",
                      "王倪聪", "黄友君", "屈姣秀", "吕艳琴", "鲁明文",
                       "郭振男", "段秉君", "弓嗣荣", "张明凯 ", "刘瑞",
                        "柳旭", "朱恬恬", "刘学雷"],
                    stu:[
                        <h1 key={1}>张志阳</h1>,
                        <h1 key={2}>张志阳</h1>,
                        <h1 key={3}>张志阳</h1>,
                        <h1 key={4}>张志阳</h1>
                    ],
                    isStart:false,
                    renderStu:[],
                    timer:null,
                    selectIndex:null,
                    winners:[]
                }

                this.delFunc = this.delFunc.bind(this);
               
            }


            componentDidMount(){
                let students = this.state.students;

                 students = students.map( (st,index) => {
                    return <Candidate  callBack={this.delFunc} index={index}  key={index}  name={st}  class="item" />
                })

                this.setState({
                    renderStu:students
                })
            }

            delFunc(index){
                    console.log('del:',index)

                    var students = this.state.students;
                    students.splice(index,1);
                    students = students.map( (st,index) => {
                    return <Candidate  callBack={this.delFunc} index={index}  key={index}  name={st}  class="item" />
                })

                this.setState({
                    renderStu:students
                })
                    
            }


            startFunc(){

                if(!this.state.isStart){
                    this.setState({
                        isStart:true
                    })

                    var len = this.state.students.length;
                    var timer = setInterval( () =>{

                        var ran = Math.floor(Math.random()*len);
                        let students = this.state.students;

                        students = students.map( (st,index) => {
                            if(ran == index){
                                this.setState({
                                    selectIndex:index
                                })
                                return <Candidate callBack={this.delFunc} index={index} key={index}  name={st}  class="select item" />
                            }else{
                                return <Candidate callBack={this.delFunc} index={index} key={index}  name={st}  class="item" />
                            }
                       
                        })

                        this.setState({
                            renderStu:students
                        })

                    },200)  
                    
                    this.setState({
                        timer:timer
                    })
                }else{
                    var index = this.state.selectIndex;
                    var students = this.state.students;
                    var winner = students[index]
                    var winners = this.state.winners;

                    students.splice(index,1);
                    winners.push(winner);
                    this.setState({
                        isStart:false,
                        winners:winners,
                        students:students
                    })

                    clearInterval(this.state.timer)
                }
            }

            addUser(){
                var name = this.refs.inputName.value;
                if(name){
                    let students = this.state.students;

                    students.push(name);
                    let renderStu = students.map( (st,index) => {
                        return <Candidate callBack={this.delFunc} index={index} key={index}  name={st}  class="item" />
                    })
      
                    this.setState({
                        students:students,
                        renderStu:renderStu
                    })

                    this.refs.inputName.value = ""
                }
            }

            

            render(){

                let winner = this.state.winners;
                winner = winner.map( (w,i) =>{
                    return (<li key={i}>{w}</li>) 
                })
       
                return(<div>
                    
                        <div  className="students">
                            
                            <div className="candidates">
                                <ul  className="block">{this.state.renderStu}</ul>
                            </div>

                             <button  className="startbtn"   onClick={this.startFunc.bind(this)}>开始</button>

                            <ul className="winner-list">
                                {winner}    
                            </ul>

                            <div>
                                <input ref="inputName"/>
                                <button  onClick={this.addUser.bind(this)}>添加</button>
                            </div>
                        </div>
                    
                    </div>)
            }

        }
        
        ReactDOM.render(<App/>,document.getElementById("root"))

    </script>
</body>
</html>